<template>
  <nav class="subnav">
    <div class="subnav-wrapper">
      <ul class="subnav-items">
        <li class="subnav-item animated fadeInRight" v-for="(item,index) in TransportItems" :key="index">
          <a class="subnav-link">
            <img :src="item.img" class="img-circle zoom-in" />
            <span class="subnav-label">{{item.title}}</span>
            <span class="subnav-class">{{item.class}}</span>
          </a>
        </li>
      </ul>
    </div>
  </nav>
</template>
<script>
export default {
  name: "SubNav",
  data() {
    return {
      TransportItems: [
        {
          img: require("@/img/subnav/card.jpg"),
          title: "传感器",
          class: "硬件"
        },
        {
          img: require("@/img/subnav/card.jpg"),
          title: "card",
          class: "硬件"
        },
        {
          img: require("@/img/subnav/card.jpg"),
          title: "card",
          class: "硬件"
        },
        {
          img: require("@/img/subnav/card.jpg"),
          title: "card",
          class: "软件"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.subnav {
  background: #fafafa;
  overflow: hidden;
  padding: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  width: 100%;
  height: 120px;
  .subnav-wrapper {
    position: relative;
    height: 100%;
    z-index: 1;
    .subnav-items {
      list-style: none;
      margin: 0 34px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 50px;
      white-space: nowrap;
      .subnav-item {
        display: inline-block;
        .subnav-link {
          color: #111;
          display: block;
          margin-top: 3px;
          padding: 0 20px;
          margin: 0 -0.11765em;
          position: relative;
          z-index: 1;
          img {
            border-radius: 50%;
            width: 60px;
            height: 60px;
            margin: 5px 0;
          }
          .subnav-label {
            white-space: normal;
            max-width: 7em;
            line-height: 1.2;
            display: block;
          }
          .subnav-class {
            color: #e85d00;
            display: block;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            font-size: 9px;
          }
        }
      }
    }
  }
}
/*subnav Animations*/
.zoom-in {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  transition: all 250ms ease;
}
.zoom-in:hover {
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
}
</style>
